<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>canvas音频特效</title>

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/style.css">
    <!-- <link rel="stylesheet" href="css/style2.css"> -->


    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            background-color: #000;
            background-position: center center;
        }

        #show {
            display: none;
        }

        #clock {
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            color: #fff;
            font-family: "等线 Light", "Microsoft Yahei Light";
            font-size: 200px;
            text-shadow: 0 0 20px yellow;
            z-index: 10;
        }

        #clock .sec {
            font-size: 1em;
        }

        #time {
            position: relative;
        }

        #clock .st {
            position: absolute;
            right: 2%;
            top: 15%;
            font-size: 0.25em;
            line-height: 1;
        }

        #can {
            margin: 0;
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 20;
        }

        * {
            padding: 0;
            margin: 0;
        }


        #slideshow img.active {
            opacity: 1;
            weight: auto;
            height: auto;
            /*有active类的图片不透明度为1，即显示图片*/
        }

        img.active {
            opacity: 1;
        }

        #slideshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -99999;
            background: center top no-repeat;
            background-size: 100% auto;


            margin: 0 auto;
            /*设置在页面水平居中*/
        }

        #slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -99999;
            background: center top no-repeat;
            background-size: 100% auto;
            /*图片采取绝对定位，均位于左上角，重叠在一起*/
            opacity: 0;
            /*初始不透明度为0，图片都看不见*/
            transition: opacity 1.6s linear;
            /*--重点--定义一个关于透明度的transition*/
        }

        #DayNight {
            position: absolute;
            top: 15%;
            left: 50%;
            margin-left: -250px;
            /* margin: 0 auto; */
            text-align: center;
            line-height: 20;
            /* color: #fff; */
            font-family: "等线 Light", "Microsoft Yahei Light";
            font-size: 0.6em;
            /* text-shadow: 0 0 20px yellow; */
            z-index: 10;
            /* background-color: pink; */
            width: 500px;
            height: 50px;
        }

        #bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        #bg canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>

<div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>


<div id="slideshow">

    <!--<img class="active" src="images/1.jpg"/> -->


</div>

<div id="show">测试</div>
<div id="clock">00:00</div>
<canvas id="can">您的浏览器不支持canvas标签</canvas>
<script>

    var picCount = 4;
    var picRealNum = 544;
    var ttt = parseInt(Math.random() * (picRealNum + 1));
    let imgs = $('<img src="images/' + ttt + '.jpg" class = "active">');
    $('#slideshow').append(imgs);
    //$("#slideshow").children("img")[0].className = "active";
    /* 动态加载节点 */
    var addImg = function () {
        var i = 1;
        var addTime = setInterval(() => {
            i++;
            // console.log(i);
            var pici = parseInt(Math.random() * (picRealNum + 1));
            let imgs = $('<img src="images/' + pici + '.jpg">');
            $('#slideshow').append(imgs)

            if (i == picCount) {

                window.clearInterval(addTime);

            }
        }, 300)


    }
    addImg();


    //----------------------------------随机数数组

    var myorder = new Array();

    function getOrder(start, end) {
        var length = end - start;

        var index = 0;
        while (index < length + 1) {
            var flag = true;
            var num = parseInt(Math.random() * (length + 1));
            for (var i in myorder) {
                if (myorder[i] == num) {
                    flag = false;
                }
            }
            if (flag == true) {
                myorder[index] = num;
                index++;
            }
        }
        // alert(myorder.length);

        // alert(myorder);
        // console.log(myorder);

    }

    getOrder(1, 66);
    // console.log(myorder);


    //--------------------------

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    var w, h, minW;
    var show = document.querySelector("#show");

    function showi(str) {
        show.innerHTML = str;
    }

    var oClock = document.querySelector("#clock");
    var tStyle = true;

    /* 时间 */
    function getTime() {
        var t = new Date();

        var a = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
        var week = new Date().getDay();
        var str4 = a[week];

        var b = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October",
            "November", "December")
        var month = new Date().getMonth();
        var str5 = b[month]


        if (tStyle) {
            oClock.innerHTML = add0(t.getHours()) + ":" + add0(t.getMinutes()) + "<span class='sec'>" + ":" + add0(t.getSeconds()) +
                "</span>" + "</br>" + "<div id='DayNight' >" + str4 + "</div>";
        } else {
            var h = t.getHours();
            var str = h < 12 ? "AM" : "PM";
            h = h <= 12 ? h : h - 12;
            oClock.innerHTML = "<span id='time'>" + add0(h) + " : " + add0(t.getMinutes()) + " <span class='sec'>" + add0(t.getSeconds()) +
                "</span><span class='st'>" + str + "</span>" + str4 + "</span>";
        }
    };

    function autoTime() {
        getTime();
        setTimeout(autoTime, 1000);
    }

    function add0(n) {
        return n < 10 ? '0' + n : '' + n;
    }

    autoTime();

    // 设定参数
    var param = {
        style: 1, // 样式
        r: 0.5, // 圆的半径
        color: "rgba(255,255,255,0.8)", // 颜色
        blurColor: "yellow", // 模糊颜色
        arr1: [], // 外圆点集合
        arr2: [], // 内圆点集合
        rotation: 2, // 是否旋转
        offsetAngle: 0, //旋转角度
        arr: [], // 获取到的频谱数组
        waveArr: new Array(120),
        cX: 0.5, // 圆中心点在x轴位置
        cY: 0.5,
        tX: 50, // 时间在x轴上的位置
        tY: 50,
        range: 1, // 振幅
        shadowBlur: 15,
        lineWidth: 3,
        showCircle: true,
        isBlur: false,
        timeNum: 90000,
    };


    var can = document.querySelector("#can");
    var ctx = can.getContext("2d");

    function resize() {
        can.width = w = window.innerWidth;
        can.height = h = window.innerHeight;
        minW = Math.min(w, h);
        oClock.style.width = w + 'px';
        oClock.style.height = oClock.style.lineHeight = h + 'px';
        setCan();
    };
    resize();
    oClock.style.fontSize = Math.floor(h / 300 * 20) + 'px';
    window.onresize = resize;

    // 这就是刷新显示
    function setCan() {
        oClock.style.color = ctx.strokeStyle = param.color;
        ctx.lineWidth = param.lineWidth;
        ctx.shadowBlur = param.isBlur ? param.shadowBlur : 0;
        ctx.shadowColor = param.blurColor;
        oClock.style.textShadow = param.isBlur ? '0 0 20px ' + param.blurColor : 'none';
    }

    /* 监听配置 */
    window.wallpaperPropertyListener = {
        applyUserProperties: function (properties) {

            if (properties.style) {
                param.style = properties.style.value;
            }
            ;
            // 半径
            if (properties.radius) {
                param.r = properties.radius.value / 100;
            }
            ;
            // 幅度
            if (properties.range) {
                param.range = properties.range.value / 5;
            }
            ;
            // 颜色
            if (properties.color) {
                var c = properties.color.value.split(' ').map(function (c) {
                    return Math.ceil(c * 255)
                });
                param.color = 'rgba(' + c + ',0.8)';
                setCan();
            }
            ;
            // 模糊颜色
            if (properties.blurColor) {
                var c = properties.blurColor.value.split(' ').map(function (c) {
                    return Math.ceil(c * 255)
                });
                param.blurColor = 'rgb(' + c + ')';
                setCan();
            }
            ;
            // 是否显示时间
            if (properties.showTime) {
                oClock.style.display = properties.showTime.value ? 'block' : 'none';
            }
            ;
            // 圆的位置
            if (properties.cX) {
                param.cX = properties.cX.value * 0.01;
            }
            ;
            if (properties.cY) {
                param.cY = properties.cY.value * 0.01;
            }
            ;
            // 时间的位置
            if (properties.tX) {
                param.tX = properties.tX.value;
                oClock.style.left = param.tX - 50 + '%';
            }
            ;
            if (properties.tY) {
                param.tY = properties.tY.value;
                oClock.style.top = param.tY - 50 + '%';
            }
            ;
            // 时间大小
            if (properties.tSize) {
                var s = properties.tSize.value;
                oClock.style.fontSize = Math.floor(h / 300 * s) + 'px';
            }
            ;
            // 时间制式
            if (properties.tStyle) {
                tStyle = properties.tStyle.value;
                getTime();
            }
            ;
            // 是否旋转
            if (properties.rotation) {
                param.rotation = properties.rotation.value;
            }
            ;
            // 线宽
            if (properties.lineWidth) {
                ctx.lineWidth = param.lineWidth = properties.lineWidth.value;
            }
            ;
            // 是否显示圆
            if (properties.showCircle) {
                param.showCircle = properties.showCircle.value;
            }
            ;
            // 是否模糊
            if (properties.isBlur) {
                param.isBlur = properties.isBlur.value;
                setCan();
            }
            ;
            //定义时间

            param.timeNum = 10 * 1000;

            var i = 0;
            var j = 0;


            var slideon = setInterval(function changeSlide() {
                slideOff(); //图片淡出

                // current++; //自增1
                j = myorder[i];
                current = j;
                i++;

                // if (current >= 48) current = 0;
                if (i >= picCount) i = 0;

                slideOn(); //图片淡入

            }, param.timeNum);

            function slideshow() {

                clearInterval(slideon);

                slideon = setInterval(function changeSlide() {
                    slideOff(); //图片淡出


                    // current++; //自增1
                    // if (current >= 48) current = 0;

                    j = myorder[i];
                    current = j;
                    i++;

                    // if (current >= 48) current = 0;
                    if (i >= picCount) i = 0;


                    slideOn(); //图片淡入
                }, param.timeNum);

                // var slideshow = document.getElementById("slideshow"),
                // 	imgs = slideshow.getElementsByTagName("img"), //得到图片们
                current = 0; //current为当前活跃的图片编号
                // current = myorder[0];

                function slideOff() {
                    // imgs[current].className = ""; //图片淡出
                    $("#slideshow").children("img")[current].className = "";
                }

                function slideOn() {
                    // imgs[current].className = "active"; //图片淡入
                    $("#slideshow").children("img")[current].className = "active";
                }


            }

            slideshow();


            ;
        }
    }

    /* 生成点 */
    function createPoint(arr) {
        param.arr1 = [];
        param.arr2 = [];
        for (var i = 0; i < 120; i++) {
            var deg = Math.PI / 180 * (i + param.offsetAngle) * 3; //角度
            var w1 = arr[i] ? arr[i] : 0;
            var w2;
            if (param.waveArr[i]) {
                w2 = param.waveArr[i] - 0.1;
            } else {
                w2 = 0;
            }
            ;
            w1 = Math.max(w1, w2);
            param.waveArr[i] = w1 = Math.min(w1, 1.2);
            var w = w1 * param.range * 100;
            var offset1 = param.r * minW / 2 + w + 1; // 外圆偏移
            var offset2 = param.r * minW / 2 - w - 1; // 内圆偏移
            var p1 = getXY(offset1, deg);
            var p2 = getXY(offset2, deg);
            param.arr1.push({
                'x': p1.x,
                'y': p1.y
            });
            param.arr2.push({
                'x': p2.x,
                'y': p2.y
            });
        }
        ;
        if (param.rotation) {
            param.offsetAngle += param.rotation / 100;
            if (param.offsetAngle >= 360) {
                param.offsetAngle = 0;
            } else if (param.offsetAngle <= 0) {
                param.offsetAngle = 360;
            }
        }
        ;
    };

    function getXY(offset, deg) {
        return {
            'x': Math.cos(deg) * offset + param.cX * w,
            'y': Math.sin(deg) * offset + param.cY * h
        };
    };
    createPoint([]);

    /* 连线 */
    function style1() {
        // 外圆
        ctx.beginPath();
        ctx.moveTo(param.arr1[0].x, param.arr1[0].y);
        for (var i = 0; i < 120; i++) {
            ctx.lineTo(param.arr1[i].x, param.arr1[i].y);
        }
        ;
        ctx.closePath();
        ctx.stroke();
        // 内圆
        ctx.beginPath();
        ctx.moveTo(param.arr2[0].x, param.arr2[0].y);
        for (var i = 0; i < 120; i++) {
            ctx.lineTo(param.arr2[i].x, param.arr2[i].y);
        }
        ;
        ctx.closePath();
        ctx.stroke();
        // 内外圆连线
        ctx.beginPath();
        for (var i = 0; i < 120; i++) {
            ctx.moveTo(param.arr1[i].x, param.arr1[i].y);
            ctx.lineTo(param.arr2[i].x, param.arr2[i].y);
        }
        ;
        ctx.closePath();
        ctx.stroke();
    };

    function style2() {
        // 内外圆连线
        ctx.beginPath();
        for (var i = 0; i < 120; i++) {
            ctx.moveTo(param.arr1[i].x, param.arr1[i].y);
            ctx.lineTo(param.arr2[i].x, param.arr2[i].y);
        }
        ;
        ctx.closePath();
        ctx.stroke();
    };
    style1();
    window.wallpaperRegisterAudioListener && window.wallpaperRegisterAudioListener(wallpaperAudioListener);

    function wallpaperAudioListener(arr) {
        param.arr = arr;
    }

    function auto() {
        ctx.clearRect(0, 0, w, h);
        createPoint(param.arr);
        if (param.showCircle) {
            switch (param.style) {
                case 1:
                    style1();
                    break;
                case 2:
                    style2();
                    break;
            }
        }
        requestAnimFrame(auto);
    }

    auto();


</script>
<script src="./js/Canvas.js"></script>


</body>

</html>